import { useState, useEffect } from 'react';
import { Form, Input, Button } from 'antd';
import { UserOutlined, LockOutlined,  } from '@ant-design/icons';
import './login.css';
import {login} from '../../../api/user'
import { useNavigate } from 'react-router-dom';

export default function Login() {
  const navigate=useNavigate()
  const [form] = Form.useForm();
  const [name,setName]=useState('')
  const [password,setPassword]=useState('')
  const [autoLogin, setAutoLogin] = useState(false)

  // 页面加载时检查是否有保存的登录信息
  useEffect(() => {
    const savedUsername = localStorage.getItem('savedUsername')
    const savedPassword = localStorage.getItem('savedPassword')
    const savedAutoLogin = localStorage.getItem('autoLogin')
    
    if (savedAutoLogin === 'true' && savedUsername && savedPassword) {
      setName(savedUsername)
      setPassword(savedPassword)
      setAutoLogin(true)
      // 自动登录
      handleAutoLogin(savedUsername, savedPassword)
    }
  }, [])

  const handleLogin=()=>{
    login({username:name,password:password}).then(res=>{
      console.log(res)
      if(res.success){
        localStorage.setItem('token',res.data)
        // 如果勾选了自动登录，保存用户名和密码
        if (autoLogin) {
          localStorage.setItem('savedUsername', name)
          localStorage.setItem('savedPassword', password)
          localStorage.setItem('autoLogin', 'true')
        } else {
          // 如果未勾选，清除保存的信息
          localStorage.removeItem('savedUsername')
          localStorage.removeItem('savedPassword')
          localStorage.removeItem('autoLogin')
        }
        setName('')
        setPassword('')
        navigate('/app')
      }
    })
  }

  const handleAutoLogin = (username: string, password: string) => {
    login({username, password}).then(res=>{
      if(res.success){
        localStorage.setItem('token',res.data)
        navigate('/app')
      }
    })
  }

  const handleAutoLoginChange = (checked: boolean) => {
    setAutoLogin(checked)
    if (!checked) {
      // 取消勾选时清除保存的登录信息
      localStorage.removeItem('savedUsername')
      localStorage.removeItem('savedPassword')
      localStorage.removeItem('autoLogin')
    }
  }

  return (
    <div className="login-container">
      <div className="login-form-container">
        <div className="login-form">
          <h1 className="login-title">协同云</h1>
        

          <Form
            form={form}
            name="login"
            layout="vertical"
            className="form"
          >
            <Form.Item
              name="username"
              rules={[{ required: true, message: '请输入用户名！' }]}
            >
              <Input
                prefix={<UserOutlined />}
                placeholder="请输入用户名"
                className="form-input"
                size="large"
                value={name}
                onChange={(e)=>setName(e.target.value)}
              />
            </Form.Item>

            <Form.Item
              name="password"
              rules={[{ required: true, message: '请输入密码！' }]}
            >
              <Input.Password
                prefix={<LockOutlined />}
                placeholder="请输入密码"
                className="form-input"
                size="large"
                value={password}
                onChange={(e)=>setPassword(e.target.value)}
              />
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="signup-button"
                size="large"
                onClick={handleLogin}
              >
                登录
              </Button>
            </Form.Item>
          </Form>

          {/* 底部选项区域 */}
          <div className="login-options">
            {/* 顶部选项 */}
            <div className="options-top">
              <div className="left-options">
                <label className="auto-login">
                  <input 
                    type="checkbox" 
                    className="checkbox-input" 
                    checked={autoLogin}
                    onChange={(e) => handleAutoLoginChange(e.target.checked)}
                  />
                  <span className="checkbox-text">自动登录</span>
                </label>
              </div>
              <div className="right-options">
                <a href="/reset" className="option-link">忘记密码</a>
              </div>
            </div>

            {/* 底部选项 */}
            <div className="options-bottom">
              <div className="center-options">
                <a href="/register" className="option-link">注册账号</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
